<script lang="ts" setup>
interface Props {
  type: string
}

const props = defineProps<Props>()
</script>

<template>
  <span class="table-tips" :class="props.type">
    <slot />
  </span>
</template>

<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.table-tips {
  display: block;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  color: #999;
  margin-bottom: 16px;
  &.orange {
    background: rgb(255, 237, 218);
    border-color: rgb(255, 228, 203);
    &::before {
      display: inline-block;
      font-family: element-icons !important;
      speak: none;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
      content: "\e7a3";
      color: rgb(255, 141, 26);
      font-size: 14px;
      margin-right: 5px;
    }
  }
  &.blue {
    background: rgb(230, 247, 255);
    border-color: rgb(202, 237, 255);
    &::before {
      display: inline-block;
      font-family: element-icons !important;
      speak: none;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
      content: "\e7a3";
      color: rgb(24, 144, 255);
      font-size: 14px;
      margin-right: 5px;
    }
  }
}
</style>
